<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .btns{
            display: grid;
            height: 580px;
            grid-template-columns: 80px 80px 80px 80px;
            grid-template-rows: 80px 80px 80px 80px;
            column-gap: 18px;
            row-gap: 18px;
        }
        .btns div{
            background-color: antiquewhite;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: #ff6200;
        }
        .input textarea{
            width: 100%;
            height: 120px;
            border: none;
            font-size: 1.6rem;
            text-align: end;
            letter-spacing: 4px;
            color: #ff6200;
        }
        .input textarea:focus-visible{
            outline: none;
        }
        .history{
            margin: 10px auto;
            display: flex;
            width: 98%;
            align-items: center;
            justify-content: center;
            height: 60px;
            border-radius: 10px;
            background-color: antiquewhite;
            color: black;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="input">
    <textarea id="inputVal"></textarea>
</div>
<div class="btns" id="btns">
    <div></div>
    <div>(</div>
    <div>)</div>
    <div></div>
    <div>C</div>
    <div>%</div>
    <div>del</div>
    <div>/</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>*</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>-</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>+</div>
    <div>00</div>
    <div>0</div>
    <div>.</div>
    <div>=</div>
</div>
<div class="history" onclick="history()">历史记录</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    let inputObj = document.getElementById('inputVal');
    for(let e of document.getElementById('btns').children){
        console.log(e)
        e.onclick = () =>{
            let text = e.innerText
            let iv = inputObj.value
            switch(text){
                case 'C':
                    inputObj.value = ''
                    break
                case 'del':
                    inputObj.value = iv.substring(0, iv.length - 1)
                    break
                case '=':
                    $.post("/cal?s="+urlencode(iv),function(data,status){
                        console.log("Data: " + data + "nStatus: " + status);
                        inputObj.value +=  "\n" +data.replaceAll('"', "")
                    })
                default:
                    inputObj.value = iv + text
            }

        }
    }
    function urlencode (str) {
        str = (str + '').toString();

        return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
        replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
    }

    function history(){
        location.href = '/history'
    }
</script>
</body>
</html>
